<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">

<head th:replace="common/menu::head"></head>

<body>
    <span th:replace="common/menu::menu"></span>

    <div>
        <p class="divtitle">[ count carry ship ]</p>
        <form>
            <input type="number" id="million" style="width:50px" placeholder="million">
            <input type="number" id="kilo" style="width:50px" placeholder="kilo">
            <select id="shipId">
                <option value="203">large</option>
                <option value="202">small</option>
            </select>
            <input type="button" value=">>" onclick="submitForm()">
            <input type="text" id="result" placeholder="result" readonly class="result"></input>
        </form>
    </div>

    <div>
        <p class="divtitle">[ count attack ship ]</p>
        <form>
            <input type="number" id="metal" style="width:100px;" placeholder="metal">
            <input type="number" id="crystal" style="width:100px;" placeholder="crystal">
            <input type="number" id="deuterium" style="width:100px" placeholder="deuterium">
            <select id="attShipId">
                <option value="203">large</option>
                <option value="202">small</option>
            </select>
            <input type="button" value=">>" onclick="attack()">
            <input type="text" id="attResult" placeholder="result" readonly class="result"/>
        </form>
    </div>

    <script language="JavaScript">
        var xmlHttp = new XMLHttpRequest();

        function submitForm() {
            var paramMillion = document.getElementById('million').value;
            var paramKilo = document.getElementById('kilo').value;
            var paramShipId = document.getElementById('shipId').value;
            var url = '/util/carry/num?m=' + paramMillion + '&k=' + paramKilo + '&shipId=' + paramShipId;

            xmlHttp.open("get", url, true);
            xmlHttp.setRequestHeader("content-type", "application/x-www-form-urlencoded");
            xmlHttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("result").value = this.responseText;
                }
            };
            xmlHttp.send();
        }

        function attack(){
            var pm = document.getElementById('metal').value;
            var pc = document.getElementById('crystal').value;
            var pd = document.getElementById('deuterium').value;
            var psid = document.getElementById('attShipId').value;
            var url = '/util/attack/num?m=' + pm + '&c=' + pc +'&d=' +pd + '&shipId=' + psid;

            xmlHttp.open("get", url, true);
            xmlHttp.setRequestHeader("content-type", "application/x-www-form-urlencoded");
            xmlHttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("attResult").value = this.responseText;
                }
            };
            xmlHttp.send();
        }
    </script>
</body>

</html>